<template>
	<view style="height: 750rpx">
		<l-echart ref="propertychart"></l-echart>
    <l-echart ref="guijingchart"></l-echart>
	</view>
</template>
 
<script>
	import * as echarts from '@/uni_modules/lime-echart/components/lime-echart/echarts.min'
	export default {
		data() {
			return {
        propertyList:[],
        medicineList:[],
        jingList:[],
        mpropertyStatistics:{},
        mjingStatistics:{},
			}
		},
		mounted() {
			this.$refs.propertychart.init(echarts, propertychart=> {
				let option = {
					title: {
						text: '中药材属性统计',
						subtext: '基于药性的统计',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {//左上角的小方块
						orient: 'vertical',
						left: 'left',
					},
					series: [
						{
							name: '中药材属性统计',
							type: 'pie',
							radius: '50%',
							data: [],
							emphasis: {//点击相关部分时，出现的动态
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};
        for(let mproperty in this.mpropertyStatistics){
          option.series[0].data.push({
            value:this.mpropertyStatistics[mproperty].count,
            name:mproperty
          });
        }
				propertychart.setOption(option);
				
			});
      this.$refs.guijingchart.init(echarts,guijingchart =>{
        let option ={
          title: {  
          	subtext: '基于归经的统计',
  					left: 'center'
          },
          legend:{
            orient: 'vertical',
            left: 'left',
          },
          tooltip:{
            trigger:'axis',
            axisPointer:{
              type:'shadow'
            }
          },
          grid:{
            left:'3%',
            right:'4%',
            bottom:'3%',
            containLabel:true
          },
          xAxis:[
            {
              type:'category',
              data:['膀胱经','三焦经','肝经','胆经','心包经','心经','脾经','小肠经','胃经','肾经','肺经','大肠经'],
              axisTick:{
                alignWithLabel:true
              }
            }
          ],
          yAxis:[
            {
              type:'value'
            }
          ],
          series:[
          {
            name:'数量',
            type:'bar',
            barWidth:'60%',
            data:[],
            emphasis:{
              itemStyle:{
                shadowBlur:10,
                shadowOffsetX:0,
                shadowColor:'#008000'
              }
            }
          }
        ]
        };
        for(let mjing in this.mjingStatistics){
          option.series[0].data.push({
            value:this.mjingStatistics[mjing].count
          });
        }
        guijingchart.setOption(option);
      });
      
      
		},
    onLoad() {
      this.loadProperty(),
      this.loadmedcine(),
      this.loadjing()
    },
    methods:{
      loadjing(){
        this.$request.get('/d_guijing/selectAll').then(res =>{
          if(res && res.data){
            this.jingList = res.data;
            console.log(res.data);
            res.data.forEach(jing =>{
              const mjing = jing.mjing;
              //判断mjing是否为多值
              if(mjing.includes('、')){
                const mjingArray = mjing.split('、');
                mjingArray.forEach(mj =>{
                  if(!this.mjingStatistics[mj]){
                    this.mjingStatistics[mj] = {
                      count:0,
                      medicineList:[]
                    };
                  }
                });
              }else{
                //单个值
                if(!this.mjingStatistics[mjing]){
                  this.mjingStatistics[mjing]={
                  count:0,
                  medicineList:[]
              }; 
             }
              }
            })
          }
        })
      },
      loadProperty() {
        this.$request.get('/d_property/selectAll').then(res => {
        if (res && res.data) {
            this.propertyList = res.data;
            console.log(res.data);
            res.data.forEach(property =>{
              const mproperty = property.mproperty;
              this.mpropertyStatistics[mproperty] = {
                count:0,
                medicineList:[]
              }
            })
        } else {
          console.error('No data received or data is not in expected format');
          }
        }).catch(error => {
            console.error('Error fetching data:', error);
           });
        },
        loadmedcine(){
          this.$request.get('/medicines/selectAll').then(res =>{
            this.medicineList = res.data;
            res.data.forEach(medicine =>{
              const mproperty = medicine.mproperty;
              if(this.mpropertyStatistics[mproperty]){
                this.mpropertyStatistics[mproperty].count++;
                this.mpropertyStatistics[mproperty].medicineList.push(medicine);
              }else{
                console.log('No corresponding mproperty in /d_property/selectAll for medicine with mproperty: ${mproperty}')
              }
            });
            
            res.data.forEach(medicine =>{
              const mjing = medicine.mjing;
              //是否为多个值
              if(mjing.includes('、')){
                const mjingArray = mjing.split('、');
                mjingArray.forEach(mj =>{
                  if(this.mjingStatistics[mj]){
                    this.mjingStatistics[mj].count++;
                    this.mjingStatistics[mj].medicineList.push(medicine);
                  }else{
                    console.log('No corresponding mj in /d_jing/selectAll for medicine with mj: ${mj}');
                  }
                });
              }else{
                if(this.mjingStatistics[mjing]){
                this.mjingStatistics[mjing].count++;
                this.mjingStatistics[mjing].medicineList.push(medicine);
              }else{
                 console.log('No corresponding mjing in /d_jing/selectAll for medicine with mjing: ${mjing}')
              }
            }
              
            });
            console.log('mjingStatistics:',this.mjingStatistics);
            console.log('mpropertyStatistics:', this.mpropertyStatistics);
          }).catch(error =>{
            console.error('Error fetching medicine data:',error);
          });
        },
    }
	}
</script>